<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22 榆林车务站 - mbtiles</title>
    <!--    <script src="../lib/ol4/ol4.js"></script>-->
    <script src='../lib/ol6.4.3/ol.js'></script>
    <script src="../lib/proj4/proj4.js"></script>
    <!--    <script src="https://cdn.jsdelivr.net/npm/mapbox-gl@2.0.0/dist/mapbox-gl.js"></script>-->
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>
	const projection = ol.proj.get('EPSG:3857');
	const tileSize = 256;
	const projectionExtent = projection.getExtent();
	// console.log(projectionExtent);
	const origins = [
		[-180.0, 90.0],
		ol.extent.getTopLeft(projectionExtent)
	];
	const origin = origins[1];
	const size = ol.extent.getWidth(projectionExtent) / tileSize;
	const maxLevel = 24;
	const resolutions = [];
	const matrixIds = [];
	for (let z = 1; z <= maxLevel; z++) {
		resolutions[z - 1] = size / Math.pow(2, z - 1);
		matrixIds[z - 1] = (z - 1).toString();
	}

	// const sR = resolutions.slice(0, 19);
	// console.log(resolutions, sR);
	console.log(resolutions);

	const tileGrid = new ol.tilegrid.WMTS({
		origin,
		resolutions: resolutions.slice(0, 20),
		extent: projectionExtent,
		matrixIds: matrixIds
	});

	const url = `http://t0.tianditu.gov.cn/img_w/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;
	// const url = `http://`;

	const wmtsSource = new ol.source.WMTS({
		url,
		layer: 'img',
		matrixSet: 'w',
		format: 'tiles',
		projection: projection,
		tileGrid: tileGrid,
		style: 'default',
		wrapX: false
	});

	/*const poiUrl = `http://t0.tianditu.gov.cn/cia_w/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;
	const poiSource = new ol.source.WMTS({
		url: poiUrl,
		layer: 'cia',
		matrixSet: 'w',
		format: 'tiles',
		projection: projection,
		tileGrid: tileGrid,
		style: 'default',
		wrapX: false
	});*/

	/*const getResolutions = () => {
		const resolutions = [];
		let res = 156543.03392800014 * 2;
		for (let z = 1; z <= maxLevel; z++) {
			res /= 2.0;
			resolutions[z - 1] = res;
		}
		return resolutions;
	};

	const mbtRes = getResolutions();

	console.log('mbtRes:', mbtRes);
	console.log('resolutions:', resolutions);*/

	let xyzUrl = 'http://192.168.109.48:10001/scgis/mbt?name=YL_DOM';  // 榆林
	// xyzUrl = 'http://192.168.108.48:9998/scgis/mbt?name=YL_DOM01';  // 榆林
	xyzUrl = 'http://192.168.108.48:9998/scgis/mbt?name=YL520';  // 榆林
	// xyzUrl = 'http://192.168.109.48:10001/scgis/mbt?name=YL0516';  // 榆林
	const xyzSource = new ol.source.XYZ({
		// url: 'http://192.168.109.48:10001/scgis/mbt?name=XJZ_DOM'
		tileUrlFunction: (tileCord) => {
			const z = tileCord[0];
			const x = tileCord[1];
			const y = -tileCord[2] - 1;
			return `${xyzUrl}&col=${x}&row=${y}&level=${z}`;
		},
		tileGrid: new window.ol.tilegrid.TileGrid({
			origin: [-2.0037508342787E7, -2.0037508342787E7],   // MBTiles遵循Web Mercator投影，EPSG：3857。在这种投影下，整个地图的原点通常定义为左下角，
			// resolutions: mbtRes,
			resolutions,
			extent: [12213251.7763, 4616840.6944, 12213926.2938, 4617878.4169],
			tileSize: 256
		}),
	});

	// 图层
	const baseLayer = new ol.layer.Tile({
		source: wmtsSource,
		// minResolution: 0.5971642834779395,
		// minResolution: 38.21851414258813,
		// maxResolution: 1222.99245256282,
	});
	/*	const poiLayer = new ol.layer.Tile({
            source: poiSource
        });*/

	const xyzLayer = new ol.layer.Tile({
		source: xyzSource,
		// minResolution: 0.03732276771737122,
		maxResolution: 0.5971642834779395,
		// minResolution: 0.29858214173889186,
	});

	const circlePoint = ol.proj.transform([109.715, 38.27], 'EPSG:4326', 'EPSG:3857');    // 榆林
	const originPoint = ol.proj.toLonLat([-2.0037508342787E7, -2.0037508342787E7], 'EPSG:4326', 'EPSG:3857');
	console.log(originPoint);
	/*	console.log('circlePoint:', circlePoint);
        const cPoint = ol.proj.transform([12213589.035050001, 4617359.5556499995], 'EPSG:3857', 'EPSG:4326');    // 根据范围计算出的中心点位
        const cPoint1 = ol.proj.transform([12213553.488676751, 4617417.932507747], 'EPSG:3857', 'EPSG:4326');    //
        const ltPoint = ol.proj.transform([12213251.776300000, 4616840.694400000], 'EPSG:3857', 'EPSG:4326');    // 左上
        const rbPoint = ol.proj.transform([12213926.293800000, 4617878.416900000], 'EPSG:3857', 'EPSG:4326');    // 右下*/

	// console.log('cPoint:', cPoint);
	// console.log('cPoint1:', cPoint1);
	// console.log('ltPoint:', ltPoint.toString());
	// console.log('rbPoint:', rbPoint.toString());
	// console.log('origin:', [-2.0037508342787E7, -2.0037508342787E7]);

	const points = [
		[0, 0],
		[12213589.035050001, 4617359.5556499995],    // 榆林
		[12213553.488676751, 4617417.932507747]    // 榆林
	];
	// const centerPoint = circlePoint;
	const centerPoint = points[2];

	const map = new ol.Map({
		layers: [
			// baseLayer,
			// poiLayer,
			xyzLayer
		],
		target: 'map',
		view: new ol.View({
			center: centerPoint,
			projection,
			zoom: 21,
			maxZoom: 24,
			minZoom: 8,
			resolutions
		})
	});
</script>
</html>
